<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>巷陌后台管理系统 (LaneBack Admin)</title>
  <link rel="stylesheet" href="../static/css/all.min.css">
  <script src="../static/js/jquery.js"></script>
  <script src="../static/js/jquery.cookie.js"></script>
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --accent-color: #4895ef;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --success-color: #4cc9f0;
      --warning-color: #f8961e;
      --danger-color: #f72585;
      --border-radius: 8px;
      --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      --border-color: #e0e0e0;
      --sidebar-width: 250px;
      --sidebar-collapsed-width: 70px;
      --header-height: 60px;
      --transition-speed: 0.3s;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: #f5f7fa;
      color: var(--dark-color);
      overflow-x: hidden;
    }

    /* 布局结构 */
    .admin-container {
      display: flex;
      min-height: 100vh;
    }

    /* 侧边栏样式 - 更新边框 */
    .sidebar {
      width: var(--sidebar-width);
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      height: 100vh;
      position: fixed;
      transition: all var(--transition-speed) ease;
      z-index: 1000;
      border-right: 1px solid var(--border-color);
    }

    .sidebar.collapsed {
      width: var(--sidebar-collapsed-width);
    }

    .sidebar.collapsed .sidebar-header h2,
    .sidebar.collapsed .nav-item span,
    .sidebar.collapsed .sub-nav,
    .sidebar.collapsed .nav-item .chevron {
      display: none;
    }

    .sidebar.collapsed .nav-item i {
      margin-right: 0;
      font-size: 1.4rem;
    }

    .sidebar-header {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sidebar-header h2 {
      font-size: 1.5rem;
      margin: 0;
      font-weight: 600;
      transition: opacity var(--transition-speed) ease;
    }

    .toggle-collapse {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-nav {
      padding: 20px 0;
      overflow-y: auto;
      max-height: calc(100vh - 80px);
    }

    .nav-item {
      padding: 12px 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border-left: 4px solid transparent;
      position: relative;
    }

    .nav-item:hover {
      background-color: rgba(255, 255, 255, 0.1);
      border-left: 4px solid var(--accent-color);
    }

    .nav-item.active {
      background-color: rgba(255, 255, 255, 0.15);
      border-left: 4px solid var(--accent-color);
    }

    .nav-item i {
      margin-right: 12px;
      font-size: 1.1rem;
      width: 24px;
      text-align: center;
      transition: margin var(--transition-speed) ease;
    }

    .chevron {
      position: absolute;
      right: 15px;
      transition: transform var(--transition-speed) ease;
    }

    .sub-nav {
      padding-left: 40px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .sub-nav.show {
      max-height: 500px;
    }

    .sub-nav-item {
      padding: 10px 0;
      display: block;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: color 0.3s ease;
      font-size: 0.9rem;
    }

    .sub-nav-item:hover {
      color: white;
    }

    /* 主内容区域 - 移除圆角和阴影 */
    .main-content {
      flex: 1;
      margin-left: var(--sidebar-width);
      transition: margin-left var(--transition-speed) ease;
      background-color: #f5f7fa;
    }

    .main-content.collapsed {
      margin-left: var(--sidebar-collapsed-width);
    }

    /* 顶部导航栏 - 更新边框 */
    .top-header {
      height: var(--header-height);
      background-color: white;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      position: sticky;
      top: 0;
      z-index: 900;
    }

    .toggle-sidebar {
      font-size: 1.2rem;
      cursor: pointer;
      color: var(--dark-color);
    }

    .header-right {
      display: flex;
      align-items: center;
    }

    .notification-bell {
      position: relative;
      margin-right: 20px;
      cursor: pointer;
      color: var(--dark-color);
    }

    .badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: var(--accent-color);
      color: white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 0.7rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .user-profile {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      margin-right: 10px;
    }

    /* Iframe容器 - 更新边框 */
    .iframe-container {
      padding: 20px;
      height: calc(100vh - var(--header-height));
    }

    #contentFrame {
      width: 100%;
      height: 100%;
      border: none;
      background: white;
      border: 1px solid var(--border-color);
    }

    /* 加载指示器 */
    .loading-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: var(--secondary-color);
    }

    .loading-indicator i {
      font-size: 3rem;
      margin-bottom: 15px;
      display: block;
    }

    .current-page {
      display: flex;
      align-items: center;
      font-size: 1.2rem;
      font-weight: 500;
    }

    .current-page i {
      margin-right: 10px;
      color: var(--primary-color);
    }

    /* 按钮样式统一 */
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background-color: var(--secondary-color);
    }

    .btn-success {
      background-color: var(--success-color);
      color: white;
    }

    .btn-success:hover {
      background-color: #3ab7d8;
    }

    .btn-danger {
      background-color: var(--danger-color);
      color: white;
    }

    .btn-danger:hover {
      background-color: #e01e69;
    }

    /* 状态标签 */
    .status-badge {
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-pending {
      background-color: #fff3cd;
      color: #856404;
    }

    .status-approved {
      background-color: #d4edda;
      color: #155724;
    }

    .status-rejected {
      background-color: #f8d7da;
      color: #721c24;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .sidebar {
        width: var(--sidebar-collapsed-width);
        overflow: hidden;
      }

      .sidebar-header h2, .nav-item span, .sub-nav,
      .nav-item .chevron {
        display: none;
      }

      .nav-item i {
        margin-right: 0;
        font-size: 1.4rem;
      }

      .main-content {
        margin-left: var(--sidebar-collapsed-width);
      }

      .sidebar.expanded {
        width: var(--sidebar-width);
        z-index: 1100;
      }

      .sidebar.expanded .sidebar-header h2,
      .sidebar.expanded .nav-item span,
      .sidebar.expanded .nav-item .chevron {
        display: block;
      }

      .sidebar.expanded .nav-item i {
        margin-right: 12px;
        font-size: 1.1rem;
      }

      .sidebar.expanded .sub-nav {
        display: block;
      }
    }

    @media (max-width: 768px) {
      .sidebar {
        width: 0;
      }

      .main-content {
        margin-left: 0;
      }

      .sidebar.expanded {
        width: var(--sidebar-width);
      }

      .iframe-container {
        padding: 10px;
      }
    }

    /* 滚动条样式 */
    .sidebar-nav::-webkit-scrollbar {
      width: 6px;
    }

    .sidebar-nav::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
<!-- 原有HTML结构保持不变 -->
<div class="admin-container">
  <!-- 侧边栏 -->
  <div class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <h2><i class="fas fa-map-marked-alt"></i> 巷陌管理</h2>
      <div class="toggle-collapse" id="toggle-collapse">
        <i class="fas fa-chevron-left"></i>
      </div>
    </div>
    <div class="sidebar-nav">
      <div class="nav-item active" data-target="/lanebankInformation" data-page="信息总览">
        <i class="fas fa-home"></i>
        <span>信息总览</span>
      </div>

      <div class="nav-item" data-target="/userManagement" data-page="用户管理">
        <i class="fas fa-users"></i>
        <span>用户管理</span>
      </div>

      <div class="nav-item has-subnav" id="content-management" data-page="内容管理">
        <i class="fas fa-store"></i>
        <span>内容管理</span>
        <i class="fas fa-chevron-down chevron"></i>
      </div>
      <div class="sub-nav" id="content-subnav">
        <a href="#" class="sub-nav-item" data-target="shopManagement" data-page="店铺管理">店铺管理</a>
        <a href="#" class="sub-nav-item" data-target="checkRecord" data-page="打卡记录">打卡记录</a>
        <a href="#" class="sub-nav-item" data-target="exploreScript"  data-page="探店剧本">探店剧本</a>
      </div>

      <div class="nav-item has-subnav" id="audit-center">
        <i class="fas fa-clipboard-check"></i>
        <span>审核中心</span>
        <i class="fas fa-chevron-down chevron"></i>
      </div>
      <div class="sub-nav" id="audit-subnav">
        <a href="#" class="sub-nav-item" data-target="/UserOwnerAduit" data-page="店主申请审核">店主申请审核</a>
        <a href="#" class="sub-nav-item" data-target="/ShopAduit" data-page="店铺信息审核">店铺信息审核</a>
      </div>
    </div>
  </div>

  <!-- 主内容区域 -->
  <div class="main-content" id="main-content">
    <!-- 顶部导航栏 -->
    <div class="top-header">
      <div class="toggle-sidebar" id="toggle-sidebar">
        <i class="fas fa-bars"></i>
      </div>
      <div class="current-page">
        <i class="fas fa-map-marker-alt"></i>
        <span id="current-page-name">信息总览</span>
      </div>
      <div class="header-right">
        <div class="notification-bell">
          <i class="fas fa-bell"></i>
          <span class="badge">5</span>
        </div>
        <div class="user-profile">
          <img class="user-avatar">
          <span class="adminName">管理员</span>
        </div>
      </div>
    </div>

    <!-- Iframe内容区域 -->
    <div class="iframe-container">
      <div class="loading-indicator" id="loadingIndicator">
      </div>
      <iframe id="contentFrame" name="iframeChange" src="/lanebankInformation"></iframe>
    </div>
  </div>
</div>

<script>
  // 原有JavaScript代码保持不变
  document.addEventListener('DOMContentLoaded', function() {
    $.ajax({
      url:"/admin/getinformationbyname",
      type:"post",
      data:{
        name:$.cookie("adminName")
      },
      success:function (res){
        console.log(res)
        document.querySelector(".user-avatar").src = res.data.icon;
        $(".adminName").html(res.data.adminName);
      }
    })

    // 侧边栏切换
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('main-content');
    const toggleSidebar = document.getElementById('toggle-sidebar');
    const toggleCollapse = document.getElementById('toggle-collapse');
    const contentFrame = document.getElementById('contentFrame');
    const loadingIndicator = document.getElementById('loadingIndicator');

    // 侧边栏折叠/展开
    toggleCollapse.addEventListener('click', function() {
      sidebar.classList.toggle('collapsed');
      mainContent.classList.toggle('collapsed');

      // 更新折叠按钮图标
      const icon = this.querySelector('i');
      if (sidebar.classList.contains('collapsed')) {
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
      } else {
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-left');
      }
    });

    // 移动端侧边栏切换
    toggleSidebar.addEventListener('click', function() {
      sidebar.classList.toggle('expanded');
    });

    // 子菜单切换
    const contentManagement = document.getElementById('content-management');
    const contentSubnav = document.getElementById('content-subnav');

    const auditCenter = document.getElementById('audit-center');
    const auditSubnav = document.getElementById('audit-subnav');

    contentManagement.addEventListener('click', function() {
      contentSubnav.classList.toggle('show');
      this.querySelector('.chevron').classList.toggle('fa-chevron-up');
    });

    auditCenter.addEventListener('click', function() {
      auditSubnav.classList.toggle('show');
      this.querySelector('.chevron').classList.toggle('fa-chevron-up');
    });

    // 导航项点击事件
    const navItems = document.querySelectorAll('.nav-item, .sub-nav-item');

    navItems.forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();

        // 移除所有active类
        navItems.forEach(navItem => {
          navItem.classList.remove('active');
        });

        // 添加active类到当前项
        this.classList.add('active');
        const currentPageElement = document.getElementById('current-page-name');
        // 获取目标页面
        const target = this.getAttribute('data-target');
        if (target) {
          const pageName = this.getAttribute('data-page');
          currentPageElement.textContent = pageName;
          // 显示提示信息
          showNotification(`已切换到: ${pageName}`);
          // 显示加载指示器
          loadingIndicator.style.display = 'block';

          // 加载对应页面到iframe
          contentFrame.src = target;
        }
      });
    });

    function showNotification(message) {
      console.log(message);
    }

    // 响应式处理
    function handleResize() {
      if (window.innerWidth > 992) {
        sidebar.classList.remove('expanded');
      }
    }

    window.addEventListener('resize', handleResize);
  });

  // 隐藏加载指示器
  function hideLoading() {
    document.getElementById('loadingIndicator').style.display = 'none';
  }
</script>
</body>
</html>